<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/head.jsp" %>
<div class="tpl-content-wrapper">

    <div class="container-fluid am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 部件首页
                    <small>Amaze UI</small>
                </div>
                <p class="page-header-description">Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件。</p>
            </div>
            <div class="am-u-lg-3 tpl-index-settings-button">
                <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置
                </button>
            </div>
        </div>

    </div>

    <div class="row-content am-cf">

        <div class="row am-cf">

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">边框表单</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <form class="am-form tpl-form-border-form tpl-form-border-br" enctype="multipart/form-data"
                              method="post" action="articleAdd">
                            <div class="am-form-group">
                                <label for="title" class="am-u-sm-3 am-form-label">标题 <span
                                        class="tpl-form-line-small-title">Title</span></label>
                                <div class="am-u-sm-9">
                                    <input type="text" class="tpl-form-input" name="title" id="title"
                                           placeholder="请输入标题文字" required minlength="5" maxlength="20">
                                    <small>请填写标题文字5-20字左右。</small>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="time" class="am-u-sm-3 am-form-label">发布时间 <span
                                        class="tpl-form-line-small-title">Time</span></label>
                                <div class="am-u-sm-9">
                                    <input type="date" class="am-form-field tpl-form-no-bg" placeholder="发布时间"
                                           required name="time" id="time">
                                    <small>发布时间为必填</small>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="author" class="am-u-sm-3 am-form-label">作者 <span
                                        class="tpl-form-line-small-title">Author</span></label>
                                <div class="am-u-sm-9">
                                    <%--  <select data-am-selected="{searchBox: 1}" style="display: none;">
                                          <option value="a">-The.CC</option>
                                          <option value="b">夕风色</option>
                                          <option value="o">Orange</option>
                                      </select>--%>
                                    <input type="text" class="tpl-form-input" id="author" placeholder="请输入作者名字"
                                           minlength="2" maxlength="40" required name="author">
                                    <small>请填写作者名字2-40字左右。</small>

                                </div>
                            </div>

                            <%--        <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label">SEO关键字 <span class="tpl-form-line-small-title">SEO</span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" placeholder="输入SEO关键字">
                                        </div>
                                    </div>--%>

                            <div class="am-form-group">
                                <label for="doc-form-file" class="am-u-sm-3 am-form-label">封面图 <span
                                        class="tpl-form-line-small-title">Images</span></label>
                                <div class="am-u-sm-9">
                                    <div class="am-form-group am-form-file">
                                        <div class="tpl-form-file-img">
                                            <img src="/resources/image/a5.png" alt="" id="fmt">
                                        </div>
                                        <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                            <i class="am-icon-cloud-upload"></i> 添加封面图片
                                        </button>
                                        <input id="doc-form-file" type="file" name="multipartFile" required>
                                    </div>

                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="type" class="am-u-sm-3 am-form-label">添加分类 <span
                                        class="tpl-form-line-small-title">Type</span></label>
                                <div class="am-u-sm-9">
                                    <input type="text" id="type" name="type" required placeholder="请添加分类用点号隔开">
                                    <div>

                                    </div>
                                </div>
                            </div>

                            <%--  <div class="am-form-group">
                                  <label for="user-intro" class="am-u-sm-3 am-form-label">隐藏文章</label>
                                  <div class="am-u-sm-9">
                                      <div class="tpl-switch">
                                          <input type="checkbox" class="ios-switch bigswitch tpl-switch-btn" checked="">
                                          <div class="tpl-switch-btn-view">
                                              <div>
                                              </div>
                                          </div>
                                      </div>

                                  </div>
                              </div>--%>

                            <div class="am-form-group">
                                <label for="context" class="am-u-sm-3 am-form-label">文章内容</label>
                                <div class="am-u-sm-9">
                                    <%--  <textarea class="" rows="10" id="context" required name="context"
                                                placeholder="请输入文章内容"></textarea>--%>
                                    <!-- 加载编辑器的容器 -->
                                    <script id="context" name="context" type="text/plain"></script>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3">
                                    <button type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<%@ include file="../common/foot.jsp" %>
<!-- 配置文件 -->
<script type="text/javascript"
        src="/resources/js/editor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/resources/js/editor/ueditor.all.js"></script>

<script>
    var ue = UE.getEditor('context');
    var upimg = document.getElementById('doc-form-file');
    var show = document.getElementById('fmt');

    upimg.addEventListener('change', function (e) {
        var objUrl = getObjectURL(this.files[0]);
        if (objUrl) {
            $(show).attr("src", objUrl);
        }

    });

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }


</script>